<template>
<div>   
    <div class="main-title">  
        <div v-show='isShowBaseInfo'>活动创建 - 基本信息</div>
        <div v-show='!isShowBaseInfo'>活动创建 - 配置信息</div>
        <div class="title-type"><span>*</span> 标为必填, 无<span> * </span>标为选填</div>
    </div>
    <el-steps :active="active" finish-status="success">
        <el-step title="基本信息" style='cursor: pointer;'></el-step>
        <el-step title="配置信息" style='cursor: pointer;'></el-step>
    </el-steps>
    <copy-base 
    v-if='action' 
    v-show='this.isShowInfo' 
    @next="netStep" 
    :action='action' 
    :classifylist='classifylist' 
    :building='building'  
    @changeDate1='getDate1' 
    @changeDate2='getDate2'  
    @changeTime1='getTime1' 
    @changeTime2='getTime2'>
        
    </copy-base>
    <copy-advanced 
    v-if='action' 
    :actionTime1='actionTime1'  
    :actionDate1='actionDate1' 
    :actionDate2='actionDate2'    
    :actionTime2='actionTime2' 
    :isShowInfo.sync='isShowInfo' 
    :action='action' 
    v-show='!this.isShowInfo' 
    :id.sync='id' 
    @next="netStep">
        
    </copy-advanced>
</div>
</template>

<script>
import CopyBase from './copy_base.vue'
import CopyAdvanced from './copy_advanced.vue'
    export default {
        data() {
            return {
                id: this.$route.params.id,
                active: 0,
                action:null,
                classifylist:null,
                building:null,
                commonlist:[],
                actionTime1:'',
                actionTime2:'',
                actionDate1:'',
                actionDate2:'',
                isShowInfo:true,
                isShowBaseInfo:true
            }
        },

        methods:{
            netStep(newId) {
                if (this.active++ > 1){
                    this.active = 0;
                }
                this.isShowInfo = false;
                this.isShowBaseInfo = false;
                this.id = newId
                window.scrollTo(0,0)
            },

             getTime1(val){
               this.actionTime1 = val
            },

            getTime2(val){
               this.actionTime2 = val
            },

            getDate2(val){
               this.actionDate2 = val
            },

            getDate1(val){
               this.actionDate1 = val
            },

            handleChangeData(){
                this.$http.post('marketweb/actionback/selectById',{
                        keyAdmin:this.$store.state.keyAdmin,
                        id:this.id
                    }).then(response=>{
                        if (response.body.code == 200) {
                        this.action = response.body.action
                        this.building = response.body.buildList;
                        this.classifylist = response.body.classifylist;
                      }else{
                        this.$message.error(response.body.msg)
                      }   
                    },response=>{
                       this.$message.error(response.body.msg)
                    })
            }
        },

        mounted(){
            this.handleChangeData()
        },

        components:{
            'copy-base':CopyBase,
            'copy-advanced':CopyAdvanced
        }

    }
</script>

<style scoped>
  .main-title{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 20px;
    color: #569efe;
  }   
  .title-type{
    font-size: 12px;
    color: #aaa;

  }
  .title-type > span{
    color: #f00;
  }  
  .el-steps{
    width: 140px;
    height: 30px;
    margin:10px auto;
  }
</style>